.select-animation() {
  transition: all 0.3s;
}

.select-container {
  @apply text-left relative h-9;
  width: 280px;
  .select-title {
    @apply h-full flex items-center justify-between border border-solid rounded cursor-pointer text-sm px-5 text-main-aa;
    border-color: #eee;

    .select-title-text {
      @apply flex items-center font-medium text-main;
      .txt {
        @apply flex-1 text-ellipsis pr-2;
      }
      .count {
        @apply h-6 rounded leading-6;
        min-width: 40px;
        padding: 0 7px;
        background-color: #eee;
        margin-right: 10px;
      }
    }

    .imgBox {
      @apply h-4 w-4 flex items-center justify-center;
      &:hover {
        .select-title-arrow {
          @apply hidden;
        }
        .select-title-clear {
          @apply inline-block;
        }
      }
      .select-title-arrow {
        @apply h-full w-full;
        .select-animation();
        &.activeEnter {
          transform: rotate(0deg);
        }
        &.activeLeave {
          transform: rotate(180deg);
        }
      }
      .select-title-clear {
        @apply hidden;
        width: 10px;
        height: 10px;
      }
    }
  }

  .select-options-items {
    @apply absolute left-0 right-0 z-1 p-5 pt-3 bg-white rounded flex flex-col;
    top: 46px;
    box-shadow: 3px 22px 50px -2px rgba(121, 120, 130, 0.15);
    max-height: 423px;
    &.select-options-items-flex {
      @apply cursor-not-allowed flex justify-center flex-col items-center text-xs leading-3;
      color: #999;

      & > img {
        @apply h-fit;
        width: 30px;
      }
    }

    .options-top {
      @apply flex-1 flex flex-col;
      border-bottom: 1px solid #eee;
      .nullBox {
        @apply w-full h-full flex flex-col items-center pt-10 mt-1;
      }
      .filter {
        @apply h-8 rounded flex items-center;
        border: 1px solid #d8d8d8;
        padding: 0 10px;
        input {
          @apply h-full text-sm flex-1;
          text-indent: 10px;
        }

        .search {
          @apply w-4 h-4;
        }
      }

      .selectBox {
        @apply flex-1 overflow-auto text-center ;
        padding: 10px 0;
        max-height: 280px;
        .select-item {
          @apply cursor-pointer font-normal text-main flex items-center px-3 rounded text-sm text-main h-8 leading-8;
          &.active {
            @apply font-semibold;
            .checked {
              @apply bg-theme;
            }
          }

          &:hover {
            .select-animation();
            background: #fff1ee;
            .checked {
              @apply bg-theme;
            }
          }
          .user {
            @apply flex-1 text-left;
          }
          .checked {
            @apply rounded relative;
            width: 14px;
            height: 14px;
            border: 1px solid #f7ece5;
            background: #fcf3ed;
            margin-right: 10px;
            &::after {
              @apply absolute w-1 h-2 border-solid;
              left: 4px;
              content: '';
              top: 1px;
              border-color: white;
              border-width: 0 2px 2px 0;
              transform: scale(1) rotate(45deg);
              animation: ripple 0.2s ease forwards;
            }
          }
        }
      }
    }

    .options-bottom {
      @apply h-6 mt-3 flex justify-end text-xs items-center w-full;

      .btn {
        @apply text-sm text-main-assist;
        @apply h-6;
        width: 48px;
        background-color: #eeeeee;

        &.btnSure {
          @apply bg-theme text-white;
          margin-left: 10px;
        }
      }
    }
  }
}
